<template>
	<view class="content" v-if="!loading">
        <uv-navbar title="none" leftIconColor="#fff" autoBack
            :titleStyle="'color:#fff;font-size: 0;font-weight:bold'" bgColor="rgba(255,255,255,0)"></uv-navbar>
       <swiper v-if="userInfo.images.length" class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in userInfo.images" :key="n">
               <!-- <image :src="i" mode=""></image> -->
               <video  :muted="true" :autoplay="true"  :src="i"></video>
            </swiper-item>
        </swiper>
      
        <view class="plr16 bgWhite  radius15 pt22" style="margin-top: -20rpx;position: relative;">
            <view class="justify-start align-center " >
                <text style="font-weight: 800;font-size: 36rpx;color: #333;">{{userInfo.name}}   <text v-if="userInfo.is_baby==1">（{{userInfo.type_name}}）</text></text>   
                <text style="font-weight: bold;font-size: 36rpx;color: #01C588;margin-left: 20rpx;"> {{userInfo.eval}}</text> <uv-icon color="#01C588" size="15" name="star-fill"></uv-icon>
            </view>
            <view class="justify-between mt12 align-end">
                <view class="ellipsis">
                        <text v-for="(i,index) in userInfo.label">{{i}}</text>
                </view>
                <view class="align-center">
                    <view  @click="addStar" class="flex-col align-center"style=" color: #999999;font-size: 26rpx;">
                        <uv-icon v-if="userInfo.is_like_status" color="#01C588" size="24" name="thumb-up-fill"></uv-icon>
                        <image v-else src="../../static/images/middle/zan.png" style="width: 35rpx;" mode="widthFix"></image>
                        {{userInfo.is_like_status?'已点赞':'点赞' }}
                    </view>
                    <button open-type="share"   class="flex-col align-center "  style="line-height: 1;color: #999999;font-size: 26rpx;margin-left: 60rpx;">
                        <image src="../../static/images/middle/share.png" style="width: 35rpx;margin-bottom:10rpx" mode="widthFix"></image>
                        分享
                    </button>
                </view>
            </view>
           
           
           <view class="mt20" style="color: #9F9F9F;">
               {{userInfo.content}}
           </view>
                      
           
        
            <view class="moduleTitle ft16 ">基础信息    </view>
            <view class="userTag justify-start">
                <text >{{userInfo.height}}M</text>
                    <text >{{userInfo.age}}岁</text>
                    <text >{{userInfo.xueli}}</text>
                    <text >{{userInfo.level}}段</text>
            </view>
            <view class="moduleTitle ft16 ">所在门店    </view>
            <view class="align-center justify-start ">
                <image src="../../static/images/middle/time.png" style="width: 30rpx;" mode="widthFix"></image>  
                <text class="bold ft13 gray3 " style="margin-left: 13rpx;">时间：{{userInfo.time_all}}</text>
            </view>
            <view class="align-start mt15 justify-start  ">
                <image src="../../static/images/middle/address.png" style="width: 30rpx;" mode="widthFix"></image>  
                <view class="flex1 mr25" style="margin-left: 13rpx;">
                    <text class="bold ft13 gray3 " >{{shopDetail.name}}</text>
                    <view class="clamp2 ft11 color8   mt5 ">
                        {{shopDetail.address}}
                    </view>
                    
                </view>
                <image style="width: 180rpx;height: 118rpx;border-radius: 6rpx;" :src="shopDetail.logo_image" mode=""></image>
                
            </view>
        </view>
        <view class=" bgWhite paybtn">
            <view class="justify-between align-center">
                <view class="align-center justify-between flex1">
                    <view class="flex-col align-center" @click="$utils.toHome()">
                        <image src="../../static/images/index/tabBar1.png" mode="widthFix"></image>
                        首页
                    </view>
                    <button style="line-height: 1.2; font-size: 24rpx;" open-type="contact" @contact="contact" class="flex-col align-center">
                        <image src="../../static/images/middle/chat.png" mode="widthFix"></image>
                        客服
                    </button>
                </view>
                    
                    <view class="payright align-center">
                            <view @click="pay(1)" class="">去约TA</view>
                            <view @click="pay(2)" class="onlinePay">立即选TA</view>
                    </view>
            </view>
        </view>
		<uv-popup ref="popup" bgColor="none" mode="center">
		    <view class="flex-col align-center">
		        <view class="bgWhite popcontent flex-col ">
		            <view class="pt15 plr18 ">
		                <view class="mb20 popTitle">
		                    立即选他
		                </view>
		               
		            </view>
		            <view class="poprule align-center justify-center"> 
		            您下单后，助教会立即前往您所在的台桌
		            <br />
		            教您打球，并开始计时
		                <br />
		            结束后，统一在前台结账
		            </view>
		            <view class="justify-between align-center allMoney buybtn">
		                <view class="" @click="close">
		                    取消
		                </view>
		                <view class="buy" @click="subOrder">
		                    立即下单
		                </view>
		            </view>
		        </view>
		        <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
		    </view>
		</uv-popup>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
                shopDetail:{},
				userInfo:{
                    images:[]
                },
                loading:false,
				table_id:uni.getStorageSync('tableId'), //
				
				
			}
		},
		
		onLoad(opt) {
                
                if(opt.id) this.id = opt.id
                if(opt.table_id) this.table_id=opt.table_id
            
                // this.getUserInfo()
                
                this.getMain()
		},
		methods: {
            close(){
              this.$refs.popup.close()  
            },
            pay(type){
				if(type==1){
					uni.navigateTo({
						url:'/pages/meetingUser/index?id='+this.id+'&shopid='+this.userInfo.shop_id
					})
				}else{
					this.$refs.popup.open()  
				}
                
				
            },
			async getUserInfo(){
				const {data} =  await this.$api.userinfo({user_id:this.user_id})
				
				
			},
			async getMain() {
                this.loading=true
                let  data =   await this.$api.getShopAssistantDetail({id:this.id })
               console.log(data)
               this.userInfo = data.detail
               this.getDetail()
			},
            async getDetail(){
             let  data=await this.$api.getShopDetail({id:this.userInfo.shop_id})  
             console.log(data)
             this.loading=false
             this.shopDetail= data.detail
            },
            async addStar(){
                 let  data;
                if(this.userInfo.is_like_status==1){
                    data=await this.$api.cancelAssistantLike({id:this.id})
                }else{
                    data=await this.$api.getShopAssistantLike({id:this.id})
                }
                  
                console.log(data)
                    
                    if(data.code==1){
                        uni.showToast({
                        	title:'操作成功'
                        })
                    this.userInfo.is_like_status=this.userInfo.is_like_status==1?0:1
                    }
            },
			
			
            async subOrder(){
                const data =await this.$api.shopAssistantOrder({id:this.id,table_id:this.table_id})
				if(data.code==1){
					uni.showToast({
						title:'预约成功'
					})
                    uni.navigateTo({
                        url:'/pages/helpTeacher/index'
                    })
					this.$refs.popup.close()
				}else{
					uni.showToast({
						title:data.msg,
						icon:'none'
					})
				}
                console.log(data)
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
    .paybtn{
        box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 20rpx 30rpx;
        background-color: #fff;
        font-weight: 500;
        font-size: 24rpx;
        color: #222222;
        .payright{
            margin-left: 40rpx;
            view{
                width: 233rpx;
                height: 84rpx;
                border-radius: 50rpx 0 0 50rpx;
                color: #fff;
                line-height: 84rpx;
                font-size: 30rpx;
                text-align: center;
                font-weight: bold;
                background-color: #343434;
            }
            .onlinePay{
              border-radius: 0 50rpx  50rpx 0;
                
                
                
                
                
                
                background: #01C588;
                color: #fff;
                
            }
        }
        
        image{
            width: 44rpx;
        }
     
      
    }
    .moduleTitle{
        font-weight: bold;
        color: #000000;
        
        margin: 30rpx 0 25rpx;
    }
        
    .swiper{
        height: 724rpx;
        video{
            width: 100%;
            height: 724rpx;
        }
    }
        
    .userTag{
        text{
            min-width: 140rpx;
            display: inline-block;
            height: 57rpx;
            background: #F5F5F5;
            line-height: 57rpx;
            border-radius: 8rpx;
            margin-right: 16rpx;
            font-weight: 400;
            font-size: 26rpx;
            text-align: center;
            color: #333333;
        }
       
    }
    .ellipsis{
            text{
                min-width: 140rpx;
                display: inline-block;
                height: 57rpx;
                background: rgba(44,179,123,0.1);
                line-height: 57rpx;
                border-radius: 8rpx;
                margin-right: 16rpx;
                font-weight: 400;
                font-size: 26rpx;
                text-align: center;
                color: #01C588;
            }
                   
    }
    .popcontent{
        height: 521rpx;
        align-items: center;
    }
    .poprule{
        width: 574rpx;
        height: 226rpx;
        background: #F5F5F5;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 53rpx;
        margin-bottom: 40rpx;
        text-align: center;
        flex-direction: column;
    }
    .buybtn{
        padding: 0;
        width: 574rpx;
        view{
            width: 280rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 30rpx;
            color: #2CB37B;
            border-radius: 32rpx;
            border: 4rpx solid #2CB37B;
            text-align: center;
        }
        .buy{
            color: #fff;
            background-color: #2CB37B;
            
            
        }
    }
</style>